<template>
  <div>
    <canvas @click="handleClickImage" canvas-id="picker" width="200" height="200" style="border: red;border-style: dotted">
    </canvas>
  </div>
</template>

<script>
export default {
  methods: {
    handleClickImage(e) {
      // todo
      console.log('xxx', e)
      const x = e.pageX
      const y = e.pageY
      // console.log(this.ctx)
      // var canvasColor = this.ctx._context.getImageData(x, y, 1, 1); // rgba e [0,255]
      // var pixels = canvasColor.data;
      // console.log(pixels, 'color')

      wx.canvasGetImageData({
        canvasId: 'picker',
        x,
        y,
        width: 1,
        height: 1,
        success(res) {
          console.log(res.width) // 100
          console.log(res.height) // 100
          console.log(res.data, 'res.data')
          console.log(res.data instanceof Uint8ClampedArray) // true
          console.log(res.data.length) // 100 * 100 * 4
        }
      })
    }
  },
  mounted() {
    const ctx = wx.createCanvasContext('picker')
    ctx.drawImage('/static/images/ab.jpg', 0, 0)
    ctx.draw()
  }
}
</script>